<template>
  <div class="card content-box">
    <span class="text"> 按钮权限</span>
    <el-alert
      class="mb20"
      :title="`当前用户按钮权限：${JSON.stringify(Object.keys(BUTTONS))}`"
      type="success"
      :closable="false"
    />
    <el-divider content-position="left">使用 Hooks 方式绑定权限</el-divider>
    <el-row class="mb20">
      <el-button type="primary" :icon="CirclePlus" v-if="BUTTONS.add">新增</el-button>
      <el-button type="warning" :icon="EditPen" v-if="BUTTONS.edit">编辑</el-button>
      <el-button type="danger" plain :icon="Delete" v-if="BUTTONS.delete">删除</el-button>
      <el-button type="info" plain :icon="Upload" v-if="BUTTONS.import">导入数据</el-button>
      <el-button type="info" plain :icon="Download" v-if="BUTTONS.export">导出数据</el-button>
    </el-row>
    <el-divider content-position="left">使用 v-auth 指令绑定单个权限</el-divider>
    <el-row class="mb20">
      <el-button type="primary" :icon="CirclePlus" v-auth="'add'">新增</el-button>
      <el-button type="warning" :icon="EditPen" v-auth="'edit'">编辑</el-button>
      <el-button type="danger" plain :icon="Delete" v-auth="'delete'">删除</el-button>
      <el-button type="info" plain :icon="Upload" v-auth="'import'">导入数据</el-button>
      <el-button type="info" plain :icon="Download" v-auth="'export'">导出数据</el-button>
    </el-row>
    <el-divider content-position="left">使用 v-auth 指令绑定多个权限</el-divider>
    <el-row>
      <el-button
        type="primary"
        :icon="CirclePlus"
        v-auth="['add', 'edit', 'delete', 'import', 'export']"
        >新增</el-button
      >
      <el-button
        type="warning"
        :icon="EditPen"
        v-auth="['add', 'edit', 'delete', 'import', 'export']"
        >编辑</el-button
      >
      <el-button
        type="danger"
        plain
        :icon="Delete"
        v-auth="['add', 'edit', 'delete', 'import', 'export']"
        >删除</el-button
      >
      <el-button
        type="info"
        plain
        :icon="Upload"
        v-auth="['add', 'edit', 'delete', 'import', 'export']"
        >导入数据</el-button
      >
      <el-button
        type="info"
        plain
        :icon="Download"
        v-auth="['add', 'edit', 'delete', 'import', 'export']"
        >导出数据</el-button
      >
    </el-row>
  </div>
</template>

<script setup lang="ts" name="authButton">
import { useAuthButtons } from '@/hooks/useAuthButtons'
import { CirclePlus, Delete, EditPen, Download, Upload } from '@element-plus/icons-vue'

const { BUTTONS } = useAuthButtons()
</script>

<style scoped lang="scss">
.content-box {
  align-items: flex-start;
  span {
    width: 100%;
    text-align: center;
  }
}
</style>
